import { View } from "@tarojs/components";
import { ModalWrapper, Paragraph } from "@/components";
import { QRCode } from "taro-code";
import { colors } from "@/data/shared/colors";
import { useAuth } from "@/store/authContext";
import { getUserQr, useUserInfo } from "@/store/userDataContext";
import { useEffect } from "react";
import style from "./index.module.scss";

type QrCodeProps = {};

const C30UserQrCode = ({ }: QrCodeProps) => {
  const { dispatchAuthAction } = useAuth();
  const { userInfoState, dispatchUserDataAction } = useUserInfo();
  const { userData } = userInfoState;

  useEffect(() => {
    if (!userData?.userInfo.userQrCode) {
      getUserQr(dispatchUserDataAction, userData!, {
        authDispatch: dispatchAuthAction,
      });
    }
  }, [userData]);

  return (
    <ModalWrapper topBarText="会员码" type="dark">
      {userData && (
        <View className={style["qr-content-area"]}>
          <QRCode
            className={style["qr-code-image"]}
            text={userData.userInfo.userQrCode}
            size={156}
            errorCorrectLevel="M"
            foregroundColor={colors.colorDark}
            backgroundColor={colors.colorLightBeige}
          />

          {/*<View className={style["vipNumber"]}>会员号：295</View>*/}

          <View className={style["qr-information-text"]}>
            <Paragraph noSpacing>此二维码为您的个人会员凭证。</Paragraph>
            <Paragraph noSpacing>请您妥善保存，切勿截屏转发。</Paragraph>
          </View>
        </View>
      )}
    </ModalWrapper>
  );
};

export default C30UserQrCode;
